<template>
	<el-row type="flex" class="row-bg">
		<el-col :span="12">
			<div class="data4-box" style="width:92%;height:300px;top:6%;position: relative;margin: 0px auto;">
				<dv-charts :option="data6" />
			</div>
		</el-col>
		<el-col :span="12">
			<div class="data4-box" style="width:92%;height:300px;top:6%;position: relative;margin: 0px auto;">
				<dv-charts :option="data5" />
			</div>
		</el-col>
	</el-row>
</template>
<script>
export default {
	name: 'Left',
	components: {

	},
	props: {
		rows: {
			default: {}
		}
	},
	data() {
		return {
			data5: {},
      data6: {},
      name: '左眼'
		}
	},
	created() {
		this.$watch('rows', () => {
			this.firstData('左眼', 6)
			this.firstData('左眼', 5)

			setInterval(res=> {
				var name = this.name
				if(this.name == '左眼') {
					name = '右眼'
				}else{
					name = '左眼'
				}
				this.name = name
				this.firstData(name, 6)
				this.firstData(name, 5)
			}, 3000)
		})
	},
	methods: {
		firstData(name, type) {
			var seriesData = []
			if(name == '左眼') {
				if(type == 6) {
					seriesData = [this.rows.data.left6data50, this.rows.data.left6data49, this.rows.data.left6data46, this.rows.data.left6data45]
				}else{
					seriesData = [this.rows.data.left5data50, this.rows.data.left5data49, this.rows.data.left5data46, this.rows.data.left5data45]
				}
				
			}else{
				if(type == 6) {
					seriesData = [this.rows.data.right6data50, this.rows.data.right6data49, this.rows.data.right6data46, this.rows.data.right6data45]
				}else{
					seriesData = [this.rows.data.right5data50, this.rows.data.right5data49, this.rows.data.right5data46, this.rows.data.right5data45]
				}
				
			}
			var text = '小学'
			if(type == 5)text = '初中' 
			var data = {
				title: {
					text: text + '视力趋势' + this.name,
					style: {
					  fill: '#fff',
					  fontSize: 17,
					  fontWeight: 'bold',
					  textAlign: 'center',
					  textBaseline: 'bottom'
					}
				},
        legend: {
          data: [
          	{name: name + '5.0及以上', color: '#9fe6b8'},
          	{name: name + '4.9', color: '#ffdb5c'},
          	{name: name + '4.6到4.8', color: '#ff9f7f'},
          	{name: name + '4.5及以下', color: '#fb7293'}
          ],
          textStyle: {
            fill: '#fff'
          }
        },
        xAxis: {
          data: this.rows.data.dates,
          // name: name,
          nameTextStyle: {
					  fill: '#fff',
					  fontSize: 20
					},
          axisLine: {
            style: {
              stroke: '#999'
            }
          },
          axisLabel: {
            style: {
              fill: '#999'
            }
          },
        },
        yAxis: {
          data: 'value',
          axisLine: {
            style: {
              stroke: '#999'
            }
          },
          axisLabel: {
            style: {
              fill: '#999'
            }
          },
          min: 0
        },
        series: [
          {
            data: seriesData[0],
            type: 'line',
            name: name + '5.0及以上',
            lineStyle: {
						  stroke: '#9fe6b8'
						}
          },
          {
            data: seriesData[1],
            type: 'line',
            name: name + '4.9',
            lineStyle: {
						  stroke: '#ffdb5c'
						}
          },
          {
            data: seriesData[2],
            type: 'line',
            name: name + '4.6到4.8',
            lineStyle: {
						  stroke: '#ff9f7f'
						}
          },
          {
            data: seriesData[3],
            type: 'line',
            name: name + '4.5及以下',
            lineStyle: {
						  stroke: '#fb7293'
						}
          }
        ]
      
      }
      if(type == 6) {
      	this.data6 = data
      }else{
      	this.data5 = data
      }
		}
	}
}
</script>
<style lang="less" scope>
</style>